import React, { useState } from "react";
import { Avatar, Card } from "antd";
import { StarFilled } from "@ant-design/icons";

interface Student {
  id: number;
  name: string;
  avatar: string;
  scores: boolean[];
}

const RewardBoard: React.FC = () => {
  const [students, setStudents] = useState<Student[]>([
    {
      id: 1,
      name: "小明",
      avatar: "https://api.dicebear.com/7.x/miniavs/svg?seed=1",
      scores: Array(10).fill(false),
    },
    {
      id: 2,
      name: "小红",
      avatar: "https://api.dicebear.com/7.x/miniavs/svg?seed=2",
      scores: Array(10).fill(false),
    },
    {
      id: 3,
      name: "小华",
      avatar: "https://api.dicebear.com/7.x/miniavs/svg?seed=3",
      scores: Array(10).fill(false),
    },
  ]);

  const toggleScore = (studentId: number, scoreIndex: number) => {
    setStudents((prev) =>
      prev.map((student) => {
        if (student.id === studentId) {
          const newScores = [...student.scores];
          newScores[scoreIndex] = !newScores[scoreIndex];
          return { ...student, scores: newScores };
        }
        return student;
      })
    );
  };

  return (
    <div style={{ padding: "10px" }}>
      {students.map((student) => (
        <Card
          key={student.id}
          style={{ marginBottom: "16px", borderRadius: "8px" }}
          bodyStyle={{ padding: "12px" }}
        >
          {/* 头像和名字行 */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              marginBottom: "12px",
            }}
          >
            <Avatar
              src={student.avatar}
              size={40}
              style={{ marginRight: "12px" }}
            />
            <span style={{ fontSize: "16px", fontWeight: "500" }}>
              {student.name}
            </span>
          </div>

          {/* 记分图标行 */}
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: "8px",
            }}
          >
            {student.scores.map((isActive, index) => (
              <StarFilled
                key={index}
                onClick={() => toggleScore(student.id, index)}
                style={{
                  fontSize: "24px",
                  color: isActive ? "#ffd700" : "#e8e8e8",
                  cursor: "pointer",
                  transition: "all 0.3s",
                }}
              />
            ))}
          </div>
        </Card>
      ))}
    </div>
  );
};

export default RewardBoard;
